<template>
  <div class="divBox">
    <el-card body-style="padding:0 0 20px 0;">
      <ueditorFrom
        :border="true"
        :height="height"
        :main-width="`800px`"
        :editor-border="false"
        ref="ueditorFrom"
        :placeholder="`建议从营收、利润、规模、人才、管理、产品、市场八大维度进行战略规划制定`"
        :content="content"
      />
    </el-card>
    <div class="cr-bottom-button btn-shadow">
      <el-button
        size="small"
        v-hasPermi="['hr:training:plan:save']"
        :loading="loading"
        type="primary"
        @click="handleConfirm()"
        >保存</el-button
      >
    </div>
  </div>
</template>
<script>
import ueditorFrom from '@/components/form-common/oa-wangeditor'
import { employeeTrainApi, getEmployeeTrainApi } from '@/api/config.js'
export default {
  name: '',
  components: { ueditorFrom },
  props: {},
  data() {
    return {
      height: 'calc(100vh - 200px)',
      content: '',
      loading: false
    }
  },

  mounted() {
    this.getConent()
  },
  methods: {
    async getConent() {
      let type = 'strategic_plan'
      const result = await getEmployeeTrainApi(type)
      this.content = result.data.content
    },
    handleConfirm() {
      this.content = this.$refs.ueditorFrom.getValue()
      if (!this.content) {
        return this.$message.error('内容不能为空')
      }

      this.loading = true
      let type = 'strategic_plan'
      let data = {
        content: this.content
      }
      employeeTrainApi(type, data)
        .then((res) => {
          this.loading = false
        })
        .catch((err) => {
          this.loading = false
        })
    }
  }
}
</script>
<style scoped lang="scss">
.cr-bottom-button {
  position: fixed;
  left: -20px;
  right: 0;
  bottom: 0;
  width: calc(100% + 220px);
}
</style>
